<!DOCTYPE html>
<html>
<head>
    <title>Css3实现文本溢出隐藏效果</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        form {
            display: flex;/*指定 Flexbox 布局*/
            /*可以在容器元素（本例为表单）设置align-items属性，它的值被所有子项目的align-self属性继承。*/
            /*align-items: center;*/
        }
        input  {
            /*输入框占据当前行的所有剩余宽度，只需要指定输入框的flex-grow属性为1。*/
            flex-grow: 1;
            align-self: flex-start;
        }
        /*flex-grow 属性
        （1）两个控件元素的宽度没有发生变化，因为弹性布局默认不改变项目的宽度。
        （2）弹性布局默认左对齐，所以两个控件会从行首开始排列。*/
        /*align-self 属性
            flex-start：顶边对齐，高度不拉伸
            flex-end：底边对齐，高度不拉伸
            center：居中，高度不拉伸
            stretch：默认值，高度自动拉伸*/
    </style>
</head>
<body>
    <!-- 弹性布局（Flexbox） -->
    <form>
        <input type="email" name="email" placeholder="email">
        <button type="submit"><svg>  <!-- a smiley icon -->  </svg></button>
    </form>
</body>
</html>